import { forwardRef, useRef, useImperativeHandle } from "react";
// 需求：点击父子组件按钮，使子组件中的input输入框聚集

// 子组件(forwardRef用于接收父组件传递的ref)
const Input = forwardRef((_props, ref) => {
  // 获取input组件的实例对象
  const inputRef = useRef(null);
  // 聚焦函数
  const focusHandler = () => {
    inputRef.current.focus();
  };
  // 将聚焦函数暴露给父组件(父组件在合适的时候调用)
  useImperativeHandle(ref, () => {
    return {
      focusHandler, // 暴露给父组件的方法
    };
  });
  return <input type="text" ref={inputRef} />;
});
// 父组件
function App() {
  // 获取子组件实例对象上通过useImperativeHandle暴露的focusHandler函数
  const sonRef = useRef(null);
  const focusHandler = () => {
    // 调用子组件暴露的函数
    sonRef.current.focusHandler();
  };
  return (
    <>
      <Input ref={sonRef} />
      <button onClick={focusHandler}>点我聚焦</button>
    </>
  );
}

export default App;
